<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 Javascript 实现文本打乱效果</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <ul>
        <li><a href="#" data-text="Home"></a></li>
        <li><a href="#" data-text="About">About</a></li>
        <li><a href="#" data-text="Hover To Scramble Me">Hover To Scramble Me</a></li>
        <li><a href="#" data-text="Services">Services</a></li>
        <li><a href="#" data-text="Our Team">Our Team</a></li>
        <li><a href="#" data-text="Contact Us">Contact Us</a></li>
    </ul>

    <script>
        document.querySelectorAll('ul li a').forEach(element => {
            let randomChars = "!@#$%^&*()_+-<>?";
            let originalText = element.dataset.text;

            element.addEventListener('mouseover', () => {
                let iterations = 0;
                let interval = setInterval(() => {
                    element.textContent = originalText.split("").map(
                        (char, index) => {
                            if (index < iterations) return char;
                            return randomChars.charAt(Math.floor(Math.random() * randomChars.length));
                    })
                    .join("");
                    if (iterations >= originalText.length) {
                        clearInterval(interval);
                    }
                    iterations += 1/ 3;
                },50)
            })
        })
    </script>
</body>
</html>